<template>

  <div>
    <div class="demo-nav">
      <div class="demo-nav__title">二维码名片</div>
      <svg viewBox="0 0 1000 1000" class="demo-nav__back" @click="toBack">
        <path fill-rule="evenodd" fill="#969799"
              d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z"></path>
      </svg>
    </div>

    <div class="image">
      <img :src="src"></img>
    </div>
    <div style="font-size: 1.3rem;">
      邀请码：{{userId.userId}}
    </div>
  </div>
</template>

<script>
  import {create} from "@/api/customer/QRCode";

  export default {
    data() {
      return {
        src: "../../../image/loading.png",
        userId:'',
      }
    },

    //页面渲染前加载
    created() {
      this.createQRCode();
    },

    methods: {
      //返回上一层
      toBack() {
        this.$router.go(-1);
      },
      createQRCode() {
        create().then(res => {
          if (res.data.code == 500) {
            alert(res.data.msg);
          }
          this.src = res.data.data.qrCode;
          this.userId = res.data.data;
          console.log(res.data.data.qrCode);
        })
      },
    }
  }
</script>


<style>
  .demo-nav {
    position: relative;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    height: 56px;
    background-color: #fff;
    font-size: 1.1rem;
  }

  .demo-nav__back {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }

  /*.image {*/
    /*width: 350px;*/
    /*height: 350px;*/
    /*margin: 0 auto;*/
    /*box-shadow: 0px 7px 10px 0px rgba(105,154,0,40);*/
    /*margin-top: 110px;*/
  /*}*/
  .image img{
    width: 300px;
    height: 300px;
    margin: 0 auto;
    margin-top: 100px;
  }
</style>
